<template>
    <div class="ant-card">
        <div class="text-white extra-item" >
            <a
                    class="box1-item"
                    v-for="(item, index) in menu"
                    :class="{ 'red-link':index === isActive }"
                    v-on:click.stop.prevent='switchTab(index)'>
                {{ item }}
            </a>
        </div>
        <a-table
                :dataSource="dataSource"
                rowKey="id"
                :columns="columns"
                :pagination="ipagination"
                style="margin: 20px"
                ref="table"
                size="middle"
                @change="handleTableChange"
        >
        </a-table>
    </div>

</template>

<script>
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  export default {
    mixins: [JeecgListMixin, mixinDevice],
    name: 'IndexBdc',
    data() {
      let that = this;
      return {
        isActive: 0,
        menu: ['五天未提交预警', '48小时未提交预警'],
        // 表头
        columns: [

          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 80,
            align: 'center',
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '机构名称',
            align: 'center',
            dataIndex: 'customerName'
          },
          {
            title: '机构类型',
            align: 'center',
            dataIndex: 'organizationSupervise',
            scopedSlots: { customRender: 'htmlSlot' },
            customRender: function(value, row, index) {
              const obj = {
                children: ' ',
                attrs: {}
              }
              let info = that.$config.getOrgLevel(parseInt(value))
              // console.log("info",info)
              if (info) {
                if (value == 0) {
                  obj['children'] =
                <
                  span
                  style = 'color:#32f199;' > { info['label'] } < /span>
                } else if (value == 1) {
                  obj['children'] =
                <
                  span
                  style = 'color:#1fdbef;' > { info['label'] } < /span>
                } else if (value == 2) {
                  obj['children'] =
                <
                  span
                  style = 'color:orange;' > { info['label'] } < /span>
                } else if (value == 3) {
                  obj['children'] =
                <
                  span
                  style = 'color:#d42c05;' > { info['label'] } < /span>
                }
              }
              return obj
            }
          },
          {
            title: '最后提交时间',
            align: 'center',
            dataIndex: 'lastCommitTime',
            scopedSlots: { customRender: 'htmlSlot' },
            customRender: function(value, row, index) {
              const obj = {
                children: < span
              style = 'color:orange;' > { value } < /span>,
              attrs: {
              }
            }
              return obj
            }
          },
          {
            title: '负责人',
            align: 'center',
            dataIndex: 'leaderName',
            customRender: function(value, row, index) {
              return value || ' '
            }
          },
          {
            title: '负责人电话',
            align: 'center',
            dataIndex: 'leaderphone',
            customRender: function(value, row, index) {
              return value || ' '
            }
          },
        ],
        ipagination1: {
          current: 1,
          pageSize: 5,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        url: {
          list: '/hc/hcRecycleRecordsWaste/queryWarning',   // 小彭接口 3.0 : 查询数据列表
        },

        // 1 五天未提交（一级及一级以下医疗机构）   2 重点监管（二级及二级以上医疗机构） 默认是1
        queryParam: {
          organizationSupervise: '1'
        }
      }
    },
    mounted() {
      // this.loadDataSource1()
    },
    methods: {
      // a标签改变的方法
      switchTab: function(index) {
        this.isActive = index;
        if(index == 0){
          this.queryParam.organizationSupervise = '1';
        }else if(index == 1){
          this.queryParam.organizationSupervise = '2';
        }
        this.loadDataSource();
      },

      loadDataSource(){
        this.loadData(1)
      }
    },

  }
</script>

<style lang="less" scoped>

        .extra-item {
            display: inline-block;
            margin: 15px 10px 10px;
            a {
                margin-left: 40px;
                font-size: 15px;
            }
            .red-link {
                color: #01B8F3;
            }
        }


    /*.item-group {*/
        /*padding: 20px 0 8px 24px;*/
        /*font-size: 0;*/
        /*a {*/
            /*color: rgba(0, 0, 0, 0.65);*/
            /*display: inline-block;*/
            /*font-size: 14px;*/
            /*margin-bottom: 13px;*/
            /*width: 25%;*/
        /*}*/
    /*}*/

    /*.item-group {*/
        /*.more-btn {*/
            /*margin-bottom: 13px;*/
            /*text-align: center;*/
        /*}*/
    /*}*/

    /*.list-content-item {*/
        /*color: rgba(0, 0, 0, .45);*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        /*font-size: 14px;*/
        /*margin-left: 40px;*/
    /*}*/

    /*@media only screen and (min-width: 1600px) {*/
        /*.list-content-item {*/
            /*margin-left: 60px;*/
        /*}*/
    /*}*/

    /*@media only screen and (max-width: 1300px) {*/
        /*.list-content-item {*/
            /*margin-left: 20px;*/
        /*}*/

        /*.width-hidden4 {*/
            /*display: none*/
        /*}*/
    /*}*/

    /*.list-content-item {*/
        /*span {*/
            /*line-height: 20px;*/
        /*}*/
    /*}*/

    /*.list-content-item {*/
        /*p {*/
            /*margin-top: 4px;*/
            /*margin-bottom: 0;*/
            /*line-height: 22px;*/
        /*}*/
    /*}*/

    /*.anty-list-cust {*/
        /*.ant-list-item-meta {*/
            /*flex: 0.3 !important;*/
        /*}*/
    /*}*/

    /*.anty-list-cust {*/
        /*.ant-list-item-content {*/
            /*flex: 1 !important;*/
            /*justify-content: flex-start !important;*/
            /*margin-left: 20px;*/
        /*}*/
    /*}*/


</style>
